<template > 
    <el-form 
    ref="ruleFormRef"
    style="max-width: 600px;margin-top:10px;"
    :model="createForm"
    :rules="rules"
    label-width="auto"
    class="form_style"
    :size="formSize"
    status-icon
    >
    <h2>添加店铺
      <span>请在下面如实填写店铺信息，其中星号为必填项</span>
    </h2>
      <el-form-item prop="shopName" label="店铺名称:">
        <el-input v-model="createForm.shopName" clas=".required-field:before"></el-input>
      </el-form-item>
      <el-form-item  prop="stallNum" label="档口号:">  
        <el-input v-model="createForm.stallNum"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="店铺简介:">   
        <el-input v-model="createForm.intro"></el-input>
      </el-form-item>
      <el-form-item prop="shopOwner" label="店长:">   
        <el-input v-model="createForm.shopOwner"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="店长手机号:">   
        <el-input v-model="createForm.mobile"></el-input>
      </el-form-item>
      <el-form-item prop="tel" label="店铺联系方式:" >  
        <el-input v-model="createForm.tel"></el-input>
      </el-form-item>
      
      <el-form-item prop="province" label="省份:">   
        <!-- <el-input v-model="ruleForm.province"></el-input> -->
        <el-select @change="handleChangeProvince" v-model="createForm.province" filterable placeholder="请输入省份名称查询">
        <el-option v-for="item in provinceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item prop="city" label="城市:">   
        <el-select v-model="createForm.city" filterable placeholder="请输入城市名称查询:">
        <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item prop="area" label="所在区域:">   
        <el-input v-model="createForm.area"></el-input>
      </el-form-item>
        <div class="block" >
          <el-form-item label="营业时间段：">
            <el-input v-model="createForm.openTime" placeholder="如：8：00-18：00"></el-input>
          </el-form-item>
        </div>
        
      <el-button type="primary" style="margin-left: 50%;"  @click="confirm()">提交</el-button>
   </el-form>
</template>
<script  lang="ts"  setup>
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage, Message } from 'element-plus'
import { reactive, ref ,computed} from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { regionData, codeToText } from 'element-china-area-data'
import { createShop } from '../../../api'
//地址选择
const provinceData = ref(regionData)
const cityData = ref([])
const provinceText = ref('')
const cityText = ref('')

// Methods
const handleChangeProvince = (value) => {
  cityData.value = []
  cityText.value = ''
  const province = codeToText[value]
  if (province === '北京市' || province === '天津市' || province === '上海市' || province === '重庆市' ||
    province === '香港特别行政区' || province === '澳门特别行政区') {
    const city = { value: value, label: province }
    cityData.value.push(city)
  } else {
    const childList = provinceData.value.find(i => i.value === value).children
    cityData.value.push(...childList)
  }
}

const createForm = ref({
  area:'',
  areaNum:'',
  city:'',
  createTime:'',
  id:'',
  intro:'',
  mobile:'',
  openTime:'',
  province:'',
  shopAddress:'',
  shopLogo:'',
  shopOwner:'',
  shopSn:'',
  shopType:'',
  stallNum:'',
  tel:'',
})

const confirm = async () => {
  console.log('更新内容', createForm)
  console.log('更新内容', createForm.value)
  let response = createForm.value
  //把updateForm.value给列表的第一列
  console.log('更新内容', response)
  let res = await createShop(createForm.value);
  console.log('查看一下', createForm)
  console.log('查看一下2', res)
  if (res.code == 200) {
    ElMessage({
      message: '添加成功',
      type: 'success',
      duration: 1000
    });
  } else {
    ElMessage({
      message: res.message,
      type: 'error',
      duration: 1000
    });
  }
}

interface RuleForm {
  shop_name:string
  // shop_sn:string
  area_num:string
  shop_type:string
  intro:string
  shop_owner:string
  mobile:string
  tel:string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  shop_name:'',
  area_num:'',
  shop_type:'',
  intro:'',
  shop_owner:'',
  mobile:'',
  tel:'',
})

const rules = reactive<FormRules<RuleForm>>({

  shop_name: [
    {
      // required: true,
      message: '请填写店铺名称',
      trigger: 'blur',
    },
  ],
  area_num: [
    {
      required: true,
      message: '请填写档口号',
      trigger: 'blur',
    },
  ],
  shop_type: [
    {
      required: true,
      message: '请填写店铺类型',
      trigger: 'blur',
    },
  ],
  intro: [
    {
      // required: true,
      message: 'Please pick a time',
      trigger: 'blur',
    },
  ],
  shop_owner: [
    {
      required: true,
      message: '请填写店长名字',
      trigger: 'blur',
    },
  ],
  mobile: [
  {
      required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号",
            trigger: "blur",
          },
         {
            pattern:
              /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9])|16[0-9])\d{8}$/,
             message: "手机号格式不正确",
          },
  ], 
  tel: [
    {
           message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "清输入11位手机号",
            trigger: "blur",
          },
         {
            pattern:
              /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9])|16[0-9])\d{8}$/,
             message: "手机号格式不正确",
          },
        ],
  
})

   const form = reactive({
    shop_name:'',
    area_num:'',
    shop_type:'',
    intro:'',
    shop_owner:'',
    mobile:'',
    tel:'',
    shop_address:'',
    province:'',
    city:'',
    area:'',
    open_time:'',
    create_time:''
   })
   const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]


// Methods
const create = async () => {
  try {
    const { data } = await createShop(form)
    if (data.code === 200) {
      ElMessage.success("操作成功！")
      resetForm() // 调用重置方法
    } else {
      ElMessage.error(data.message || "操作失败！") // 提供失败提示
    }
  } catch (error) {
    console.error(error)
    ElMessage.error("操作失败！")
  }
}
//重置表单
const resetForm = () => {
  Object.assign(form, {
    shop_name:'',
    area_num:'',
    shop_type:'',
    intro:'',
    shop_owner:'',
    mobile:'',
    tel:'',
    shop_address:'',
    province:'',
    city:'',
    area:'',
    open_time:'',
    create_time:''
  })
}
</script>
<style scoped>
/* 表单的样式 */
.form_style {
  margin-left:auto;
  margin-right:auto;
  max-width: 500px;
  background: #FFF;
  padding: 30px 30px 20px 30px;
  box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
  border-radius: 10px;
  -webkit-border-radius: 10p
}
/*大标题样式*/
.form_style h2 {
  font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  padding: 0px 0px 10px 40px;
  display: block;
  border-bottom: 1px solid #F5F5F5;
  margin: -10px -30px 10px -30px;
  color: #354552;
}
/*小标题样式*/
.form_style h2>span {
display: block;
font-size: 12px;
}
</style>